<template>
    <div class="">
        <el-dialog title="建筑消防图纸详情" :visible.sync="dialogVisible" width="1100px" :before-close="closeEditDialog"
            :close-on-click-modal="false" :append-to-body="true">

            <el-carousel arrow="always" :autoplay="false" trigger="click" @change="changeItem" ref="carousel"
                class="carouselBox">
                <el-button size="small" style="
            height: 30px;
            position: absolute;
            right: 20px;
            z-index: 99;
            top: 20px;
          " @click="onEdit()" type="primary">标记编辑</el-button>

                <el-carousel-item v-for="item in listAll" :key="item.id">
                    <div class="caritem" @click.stop="hidePop">
                        <div class="caritem_div">
                            <div class="div_box"
                                :style="{ transform: `scale(${scale}) `, left: `${x}px`, top: `${y}px` }"
                                @wheel="handleWheel" @mousedown.stop="handleMouseDown" @mousemove="handleMouseMove"
                                @mouseup="handleMouseUp">
                                <el-image class="elImage" :src="item.image" @mousedown.prevent></el-image>
                                <i class="el-icon-location icon"
                                    :style="'top:' + item.top + 'px;' + 'left:' + item.left + 'px;'"
                                    v-for="item in markVOList" :key="item.id" :class="iconclass(item)"
                                    @click.stop="clickIcon(item.id)">
                                    <div class="pop-up"
                                        :style="popstr == item.id ? 'opacity: 1;visibility: visible;' : ''"
                                        @click.stop="clickPop">
                                        <div style="margin-bottom: 5px">
                                            设备编码：{{ item.imei }}
                                        </div>
                                        <div >产品类型：{{ item.productName }}</div>
                                        <!-- <div>安装备注：{{ item.remark || '-' }}</div> -->
                                    </div>
                                </i>
                            </div>
                        </div>
                    </div>
                </el-carousel-item>
            </el-carousel>

            <div class="pointer">
                <div v-for="(item, index) in listAll" :key="item.id" @click="addSubmit(index)" :style="active == index ? 'background-color: #7367F0; opacity: 1;' : ''
                    ">
                    {{ item.name }}
                </div>
            </div>
        </el-dialog>

        <editdrawing ref="refeditdrawing" :floorId="floorId" :image="image"></editdrawing>
    </div>
</template>

<script>
import { reqGetMark } from "@api/api.js";
import editdrawing from "./editdrawing.vue";

export default {
    props: ["listAll"],
    components: {
        editdrawing,
    },
    data() {
        return {
            dialogVisible: false,
            left: 0,
            top: 0,
            flag: false,
            markVOList: [],
            active: "",
            floorId: "",
            image: "",
            popstr: "", //弹窗显示隐藏

            // 放大缩小
            scale: 1, // 初始缩放比例为1
            scaleStep: 0.1, // 每次滚动缩放的步长

            // 鼠标拖动
            x: 0, // div的初始x坐标
            y: 0, // div的初始y坐标
            dragging: false, // 是否正在拖动
            startX: 0, // 鼠标按下时的x坐标
            startY: 0, // 鼠标按下时的y坐标
        };
    },
    computed: {},
    watch: {},
    methods: {
        hidePop() {
            this.popstr = ''; // 隐藏所有 pop-up
        },
        // 鼠标拖动
        handleMouseDown(event) {
            this.dragging = true;
            this.startX = event.clientX - this.x;
            this.startY = event.clientY - this.y;
        },
        handleMouseMove(event) {
            if (!this.dragging) return;
            this.x = event.clientX - this.startX;
            this.y = event.clientY - this.startY;
        },
        handleMouseUp() {
            this.dragging = false;
        },
        // 放大缩小
        handleWheel(event) {
            event.preventDefault(); // 阻止默认事件，防止页面滚动
            const delta = event.deltaY * -1; // 获取滚轮滚动的方向
            this.scale += delta > 0 ? this.scaleStep : -this.scaleStep; // 根据滚动方向调整缩放比例
            // 限制缩放比例的范围，防止过大或过小
            this.scale = Math.min(Math.max(0.1, this.scale), 5);
        },
        closeEditDialog() {
            this.popstr = "";
            this.dialogVisible = false;
            this.scale = 1 // 初始缩放比例为1
            this.scaleStep = 0.1 // 每次滚动缩放的步长
            this.x = 0// div的初始x坐标
            this.y = 0 // div的初始y坐标
            this.dragging = false // 是否正在拖动
            this.startX = 0 // 鼠标按下时的x坐标
            this.startY = 0 // 鼠标按下时的y坐标
        },
        clickPop() {

        },
        //弹窗显示隐藏
        clickIcon(id) {
            if (this.popstr == id) {
                this.popstr = "";
                return;
            }
            this.popstr = id;
        },
        // 标记编辑
        onEdit() {
            // if (this.markVOList.length == 0) return this.$modal.notifyWarning('楼层暂无设备!');
            if (this.flag) return this.$modal.notifyWarning('楼层暂无设备!');
            this.image = this.listAll[this.active].image;
            this.$refs.refeditdrawing.getGetMark();
            this.$refs.refeditdrawing.dialogVisible = true;
        },
        // 标记点颜色
        iconclass(e) {
            // console.log(e);
            if (e.isAlarm == 1) {
                return "hon";
            }
            if (e.online == 0) {
                return "lixian";
            }
        },
        // 幻灯片切换时触发
        changeItem(e) {
            // console.log(e);
            // console.log(this.listAll[e].id);
            this.active = e;
            this.getGetMark(this.listAll[e].id); //获取平面图设备标点
        },
        // 点击幻灯片tab
        async addSubmit(i) {
            this.active = i;
            this.$refs.carousel.setActiveItem(i); // 将tab的下标指定为走马灯的下标
        },
        //获取平面图设备标点
        async getGetMark(id) {
            this.floorId = id; //编辑用
            const res = await reqGetMark(1,99,{
                floorId: id,
            });
            // console.log(res);
            this.flag = false;
            if (res.data.row.markVOList == null) {
                this.flag = true;
            }
            this.markVOList = res.data.row.markVOList || [];
            if (this.markVOList.length == 0) return;
            this.markVOList = this.markVOList.filter((item) => item.mark != "");
            this.markVOList.forEach((item) => {
                item.left = item.mark.slice(0, item.mark.indexOf(","));
                item.top = item.mark.slice(item.mark.indexOf(",") + 1);
            });
            // console.log(this.markVOList);
        },
        // 点击时切换到对应的幻灯片以及tab下标
        getactive(id) {
            this.listAll.forEach((item, index) => {
                if (item.id == id) {
                    this.active = index;
                    this.$nextTick(() => {
                        setTimeout(() => {
                            this.$refs.carousel.setActiveItem(index);
                        }, 50)
                    });
                    return;
                }
            });
        },
    },
    created() { },
    mounted() { },
};
</script>

<style lang="less" scoped>
@import url("~@views/common.less");

.el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
}

.el-carousel__item.is-active {
    background-color: @primaryBgcolor7;
}

.el-carousel__item {
    .caritem {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        .caritem_div {
            width: 800px;
            height: 450px;
            position: relative;
        }
    }

    .div_box {
        margin: 0 auto;
        width: 800px;
        height: 450px;
        position: absolute;
        top: 50%;
        left: 50%;
        // transform: translate(-50%, -50%);
        cursor: move;

        .elImage {
            width: 100%;
            height: 100%;
        }

        .icon {
            position: absolute;
            color: #28c76f;
            font-size: 18px;
            cursor: pointer;

            .pop-up {
                position: absolute;
                // left: 10px;
                bottom: 28px;
                left: 50%;
                transform: translate(-50%, 0);
                // background-color: #7367F0;
                background: rgba(115, 103, 240, 0.9);
                width: 250px;
                padding: 8px 10px;
                border-radius: 5px;
                font-size: 14px;
                color: #fff;
                z-index: 9999;
                // display: none;
                opacity: 0;
                visibility: hidden;
                // user-select: none;
                transition: all 0.2s ease-in;
                cursor: text;

                // 向下小箭头
                &:after {
                    content: "";
                    border: 8px solid transparent;
                    border-top-color: rgba(115, 103, 240, 0.9);
                    position: absolute;
                    bottom: -15px;
                    left: 50%;
                    transform: translate(-50%, 0);
                }
            }
        }

        .hon {
            color: #f84242;
        }

        .lixian {
            color: #90a4ae;
        }
    }
}

.carouselBox {
    height: calc(100vh - 195px);

    ::v-deep .el-carousel__container {
        height: calc(100% - 30px);
    }
}

//   .el-carousel__item:nth-child(2n) {//2n双数
//     background-color: red;
//   }

//   .el-carousel__item:nth-child(2n+1) {//2n+1 奇数
//     background-color: #000;
//   }

::v-deep .el-carousel__indicators--horizontal {
    display: none; //隐藏指示器
}

.pointer {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;

    >div {
        user-select: none;
        background-color: #7367f0;
        color: #fff;
        font-size: 12px;
        padding: 4px 15px;
        margin: 0 4px;
        cursor: pointer;
        border-radius: 4px;
        opacity: 0.6;
        margin-top: 5px;

        &:hover {
            background-color: #7367f0;
            opacity: 1;
        }
    }
}

::v-deep .el-dialog__body {
    padding: 10px 20px 30px 20px;
}
</style>
